<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        let i = 0
        // box.addEventListener('mousemove', function () {
        //     box.innerHTML = i++
        // })
        const move = function () {
            box.innerHTML = i++
        }

        // 节流： throttle
        // 持续的触发事件，在一段时间内只允许函数执行一次
        // ==> 减少一段时间内，事件的执行频率

        // 应用场景
        // 1. 浏览器窗口缩放事件
        // 2. 滚动scroll事件，mousemove事件等

        // 需求：每500ms只执行一次，声明一个开始时间，如果当前时间减去开始时间
        // 如果 >= 500， 就执行函数
        const throttle = (fn, ms) => {
            let startTime = 0
            return function (...args) {
                let now = Date.now()
                // 如果当前时间 - 开始时间 >= 等待时间，再执行函数
                if (now - startTime >= ms) {
                    // fn.call(...args)
                    fn.apply(this, args)
                    startTime = now // 将当前时间记录，作为下一个计时的起点
                }
            }
        }
        box.addEventListener('mousemove', throttle(move, 1000))
    </script>
</body>

</html>